import React from 'react'
import style from './index.less'
import { connect } from 'dva';
import { Tabtitle } from '../../../components'
import DefinitionList from '../../../components/DefinitionList'
import { Card, Row, Col, Table, Pagination } from 'antd'




/**
 * [ToolBar 工具栏]
 * 引用组件
 * TraderSelect 交易员选择框
 * StockSelect 股票选择框
 * TimeSelect 时间段选择
 */
import TraderSelect from '../components/TraderSelect'
import StockSelect from '../components/StockSelect'
import TimeSelect from '../components/TimeSelect'
// import TimeRangeSelect from '../../../components/toolbar/TimeRangeSelect'
// import TimeRadio from '../../../components/toolbar/TimeRadio'
const ToolBar = (props) => {
  return (
    <Row type="flex" justify="space-between" className='toolbar'>
      <Col>
        <DefinitionList name='交易员：' value={<TraderSelect {...props} />} />
        <DefinitionList name='股票：' value={<StockSelect {...props} />} />
      </Col>
      <Col>
      <TimeSelect {...props} />
      {/* <TimeRangeSelect begindate={begindate} enddate={enddate} location={location} />
      <TimeRadio /> */}
      </Col>
    </Row>
  )
}

/**
 * [ContentDisplay 查询结果]
 * 引用组件 
 * TraderQuota 交易员指标
 * TraderCollection 交易员汇总详情
 * StockCollection 股票汇总详情
 * StockProfit 股票盈亏统计
 * TradeYield 交易收益分布
 * TradeTime 交易时段统计
 * OpenInterest 未平仓详情
 * StockQuota 股票指标
 * TradeRecords 交易记录
 * StockPerformance 股票表现
 */
import TraderQuota from '../components/TraderQuota'
import TabsMain from '../../../components/TabsMain'
import TraderCollection from '../components/TraderCollection'
import StockCollection from '../components/StockCollection'
import StockProfit from '../components/StockProfit'
import TradeYield from '../components/TradeYield'
import TradeTime from '../components/TradeTime'

import OpenInterest from '../components/OpenInterest';
import StockQuota from '../components/StockQuota';
import TradeRecords from '../components/TradeRecords';
import StockPerformance from '../components/StockPerformance';
const ContentDisplay = (props) => {
  // const myProps={
  //   trader,
  //   stock,
  //   begindate,
  //   enddate,
  // }
  console.log('ContentDisplay>>',props)
  return(
    <Row className='contentDisplay'>
    {
        props.stock==='total'?(
          <Col>
            <TraderQuota {...props} />
            
            <TabsMain>
              <TraderCollection title='交易员汇总详情' {...props} isblank={props.trader !== 'total'} />
              <StockCollection title='股票汇总详情' {...props} />
              <StockProfit title='股票盈亏统计' {...props} />
              <TradeYield title='交易收益分布' {...props} />
              <TradeTime title='交易时段统计' {...props} />
              <OpenInterest title='未平仓详情' {...props}/>
            </TabsMain>
          </Col>
        ):(
          <Col>
            <StockQuota {...props} />
            <TabsMain>
              <StockPerformance title='交易K线图' {...props} />
              <TradeRecords title='交易列表' {...props} />
            </TabsMain>
          </Col>
        )
      }
      
    </Row>
  )
}

/**
 * [DailyReplay 日内复盘主组件]
 */
const DailyReplay = ({ dailyReplay, location }) => {

  /*const {
    trader = null, // 交易员ID 默认值：团队
    traderDefinitionList = [], // 交易员定义列表 默认值： []
    stock = null, // 股票ID 默认值：所有股票
    stockDefinitionList = [], // 股票定义列表 默认值：[]
    begindate = null, // 开始时间 默认值：最新交易日 YYYY-MM-DD
    enddate = null, // 结束时间 默认值：最新交易日 YYYY-MM-DD
    ...props
    // traderQuota = {},// 指标展示数据 默认值：{}
    // traderIndex = {}, // 交易员指标数据 默认值：{}
    // stockIndex = {}, // 股票指标数据 默认值：{}
    // stockYield = [], // 股票收益数据 默认值：[]
    // tradingYieldDistribution = [], // 交易收益率分布数据 默认值：[]
    // tradingTimeDistribution = [], // 交易时段分布数据 默认值：[]
  } = dailyReplay

  const myProps = {
    trader,
    stock,
    begindate,
    enddate,
  }
  const toolProps={
    timeRange,
    traderDefinitionList,
    stockDefinitionList
  }*/

  return (
    <div className={`${style.root}`}>
      <Tabtitle value={'日内复盘'} />
      <div className="content-inner">
        <ToolBar  {...dailyReplay}  location={location} />
        <ContentDisplay {...dailyReplay} />
      </div>
    </div>
  );
}

export default connect(({ dailyReplay }) => ({ dailyReplay }))(DailyReplay)